<!DOCTYPE html>
<!-- 这是HTML5的文档类型声明 -->

<html>
<!-- HTML文档的开始标签 -->
  <body>
  <!-- 文档的主体部分开始 -->
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <!-- 创建一个id为myCanvas的canvas元素，宽度为200像素，高度为200像素 -->

    <script>
    // canvas
    // 以下是JavaScript代码，用于在canvas上绘图
      var canvas = document.getElementById('myCanvas');
      // 获取id为myCanvas的canvas元素，并将其赋值给变量canvas

      var ctx = canvas.getContext('2d');
      // 获取canvas的2D绘图上下文，并将其赋值给变量ctx

      ctx.fillStyle = 'green';
      // 设置填充颜色为绿色

      ctx.fillRect(50, 50, 100, 100);
      // 在canvas上绘制一个填充矩形，矩形左上角坐标为(50, 50)，宽度为100像素，高度为100像素
    </script>

   

    <!-- 使用svg -->
    <svg width="100" height="100">
      <!-- 创建一个宽度为100像素，高度为100像素的SVG元素 -->
      <circle cx="50" cy="50" r="40" fill="red" />
      <!-- 在SVG中绘制一个圆形，圆心坐标为(50, 50)，半径为40像素，填充颜色为红色 -->
    </svg>
  </body>
</html>